<!-- 首页卡片信息快 组件 -->
<template>
  <div id="homeRecommendCardBox">
    <!-- 卡片总区域 -->
    <div class="card_box">
      <!-- 卡片标题区域 -->
      <div class="card_title_box">
        <router-link :to="'/articlePage/'+cardList.question_id" class="card_title">{{ cardList.title }}</router-link>
      </div>
      <!-- 卡片中间内容区域 文章收缩的 -->
      <div class="card_body_box_close" v-if="!isOpen">
        <!-- 中间左边图片区域 -->
        <router-link :to="'/articlePage/'+cardList.question_id"><img :src="require('C:\\project_picture/'+cardList.answer_img)" class="card_body_left_img" v-if="cardList.answer_state==1"></router-link>
        <!-- 中间右边文章内容部分显示区域 -->
        <div class="card_body_right_box" :style="!cardList.answer_state==1 ? changeCardRightBoxStyle:''">
          <p class="card_content_text" @click="isOpen=!isOpen">{{ cardList.content }}</p>
          <div class="btn_open" @click="getUList">阅读全文 ↓</div>
        </div>
      </div>
      <!-- 卡片中间内容区域 文章全部显示的 -->
      <div class="card_body_box_open" v-if="isOpen">
        <!-- 打开页面头部回答用户信息 -->
        <div class="open_head_box">
          <!-- 用户栏左边头像 -->
          <img :src="require('C:\\project_picture/'+uList.userMessages.img)" class="card_user_img" style="margin-right: 5px">
          <!-- 用户姓名 -->
          <div class="card_user_name">{{ cardList.nick_name }}</div>
          <!-- 用户签名 -->
          <div class="card_user_sign">，{{ cardList.introduce }}</div>
        </div>
        <!-- 打开页面点赞数行 -->
        <div style="color: #8590a6;font-size: 14px;margin: 5px 0px;">{{ cardList.good_num }} 人赞同了该回答</div>
        <!-- 打开页面回答的内容 -->
        <div class="open_content_box">
          {{ cardList.content }}
        </div>
      </div>
      <!-- 卡片下边用户操作区域 -->
      <div class="card_function_box">
        <!-- 点赞按钮 -->
        <div class="btn_voteGood" @click="doChangeGood" :style="isGood?changeVoteStyle:''">
          <span v-if="!isGood">赞同</span>
          <span v-if="isGood">已赞同</span>
          {{ cardList.good_num }}
        </div>
        <!-- 不赞同按钮 -->
        <div class="btn_voteBad" @click="doChangeBad" :style="isBad?changeVoteStyle:''">
          <span v-if="!isBad">踩</span>
          <span v-if="isBad">已踩 </span>
          {{ cardList.bad_num }}
        </div>
        <!-- 评论按钮 -->
        <div class="btn_comment" @click="isCommentOpen=!isCommentOpen">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/comment_btn.png" class="btn_comment_img"></div>
          <span style="float: left" v-if="!isCommentOpen">{{ commentList.length }} 条评论</span>
          <span style="float: left" v-if="isCommentOpen">收起评论</span>
        </div>
        <!-- 分享按钮 -->
        <div class="btn_analysis">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/share_btn.png" class="btn_comment_img"></div>
          <span style="float: left">分享</span>
        </div>
        <!-- 收藏按钮 -->
        <div class="btn_collection" @click="doCollection">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/collection_btn.png" class="btn_comment_img"></div>
          <span style="float: left">收藏</span>
        </div>
        <!-- 收缩文章按钮 -->
        <div class="btn_close" v-if="isOpen" @click="isOpen=!isOpen">收起 ↑</div>
      </div>
      <!-- 评论区域 -->
      <div class="comment_box" v-if="isCommentOpen">
        <!-- 评论区域头 -->
        <div class="comment_head_box">
          <span class="comment_head_span">{{ commentList.length }} 条评论</span>
        </div>
        <!-- 评论组件内容区域 -->
        <CommentCard @getNewData="getCommentData" v-for="(i, index) of commentList" :key="index" :list="i"></CommentCard>
        <!-- 没有评论输入数据区域 -->
        <CommentInputCard v-if="commentList.length==0&&isCommentOpen" @getNewData="getCommentData" :aid="cardList.id"></CommentInputCard>
      </div>
    </div>
  </div>
</template>

<script>
import CommentCard from '../../../components/CommentCard'
import CommentInputCard from '../../../components/CommentInputCard'
export default {
  name: 'homeRecommendCardBox',
  components: {
    'CommentCard': CommentCard,
    'CommentInputCard': CommentInputCard
  },
  data () {
    return {
      isOpen: false,
      isGood: false,
      isBad: false,
      isOpens: false,
      isCommentOpen: false,
      changeCardRightBoxStyle: [{'width': '100%'}, {'height': '95%'}, {'padding': '0px'}],
      changeVoteStyle: [{'background-color': '#0084ff'}, {'color': 'white'}],
      commentList: [],
      uList: []
    }
  },
  props: ['cardList'],
  computed: {
  },
  methods: {
    doChangeGood () {
      if (this.isGood) {
        this.cardList.good_num--
      } else {
        this.cardList.good_num++
      }
      this.isGood = !this.isGood
      if (this.isBad) {
        this.cardList.bad_num--
      }
      this.isBad = false
    },
    doChangeBad () {
      if (this.isBad) {
        this.cardList.bad_num--
      } else {
        this.cardList.bad_num++
      }
      this.isBad = !this.isBad
      if (this.isGood) {
        this.cardList.good_num--
      }
      this.isGood = false
    },
    getUList () {
      this.isOpen = !this.isOpen
      this.axios.get('/api/getoneMessage', {
        params: {
          id: this.cardList.uid
        }
      })
        .then((response) => {
          this.uList = response.data.data
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    },
    changeGoodNumData (swi) {
      this.axios.get('/api/addAnswerGoodNumByAnswerId', {
        params: {
          id: this.cardList.id,
          isAdd: swi
        }
      })
        .then((response) => {
          this.commentList = response.data.data
          console.log(response)
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    },
    changeBadNumData (swi) {
      this.axios.get('/api/addAnswerBadNumByAnswerId', {
        params: {
          id: this.cardList.id,
          isAdd: swi
        }
      })
        .then((response) => {
          this.commentList = response.data.data
          console.log(response)
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    },
    doCollection () {
      if (this.cardList.isCollect === 0) {
        // 传回答id去收藏回答
        this.axios.get('/api/collectAnswer', {
          params: {
            phone: sessionStorage.getItem('phone'),
            answer_id: this.cardList.id
          }
        })
          .then((response) => {
            this.$Message.success('收藏成功!')
            this.getNewCommentData()
          })
          .catch((error) => {
            this.$Notice.error({
              title: '通知',
              desc: '接口，异常！'
            })
            console.info(error)
          })
      } else {
        this.$Message.error('已收藏!')
      }
    },
    getCommentData () {
      // this.isCommentOpen = false
      this.axios.get('/api/getComment', {
        params: {
          id: this.cardList.id,
          state: this.cardList.answer_state
        }
      })
        .then((response) => {
          this.commentList = response.data.data
          console.log(response)
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    },
    getNewCommentData () {
      this.$emit('getNewCommentData', 1)
    }
  },
  beforeDestroy () {
    if (this.isGood) {
      this.changeGoodNumData(true)
    }
    if (this.isBad) {
      this.changeBadNumData(true)
    }
  },
  created () {
    // 通过回答id获取对应的评论
    // alert(this.cardList.id + ' ' + this.cardList.answer_state)
    this.getCommentData()
  }
}
</script>

<style scoped>
  @import '../../../../../../static/css/home/HomeRecommendCardBox.css';
</style>
